<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div class="c-layout">
        <!-- 部门 -->
        <div class="c-layout-sidebar">
            <c-dept-manage />
        </div>
        <!-- 用户列表 -->
        <div class="c-layout-content">
            <c-table ref="employeeTable" :api-interface="getEmployeePage">
                <!-- 查询条件 -->
                <template v-slot:headerFormItem="">
                    <a-form-item label="用户名">
                        <a-input style="width: 300px;" type="text" autocomplete="off" v-decorator="[ 'username',{ initialValue : username } ]" />
                    </a-form-item>
                    <a-form-item label="手机号码">
                        <a-input style="width: 300px;" type="text" autocomplete="off" v-decorator="[ 'userMobile',{ initialValue : userMobile } ]" />
                    </a-form-item>
                </template>
                <!-- 操作按钮 -->
                <template v-slot:headerOperators="">
                    <a-button icon="plus" type="primary" @click="clickAddEmployeeButton">添加</a-button>
                </template>
                <!-- 列 -->
                <template v-slot:columns="">
                    <a-table-column title="编号" dataIndex="id" :align="'center'" />
                    <a-table-column title="用户名" dataIndex="username" :align="'center'" />
                    <a-table-column title="手机号码" dataIndex="userMobile" :align="'center'" />
                    <a-table-column title="所属部门" dataIndex="deptName" :align="'center'" />
                    <a-table-column title="创建时间" dataIndex="createTime" :align="'center'" />
                    <a-table-column title="最后修改时间" dataIndex="lastModifyTime" :align="'center'" />
                    <a-table-column title="操作" :align="'center'">
                        <template slot-scope="record">
                            <a href="javascript:void(0);" @click="clickEditEmployeeButton(record)">修改</a>
                            <a-divider type="vertical" />
                            <a href="javascript:void(0);" @click="clickDeleteEmployeeButton(record)">删除</a>
                        </template>
                    </a-table-column>
                </template>
            </c-table>
        </div>
        <!-- 表单 -->
        <c-form-modal ref="employeeFormModal">
            <template v-slot:formItem="">
                <!-- 员工姓名 -->
                <a-form-item label="员工姓名">
                    <a-input type="text"
                             placeholder="请输入员工姓名"
                             autocomplete="off"
                             v-decorator="[ 'username',{ rules: [
                                { required: true, message: '请输入员工姓名' },
                                { min:2, message:'长度为3-20个字符' },
                                { max:20, message:'长度为3-20个字符' },
                             ]}]"
                    />
                </a-form-item>
                <!-- 手机号码 -->
                <a-form-item label="手机号码">
                    <a-input type="text"
                             placeholder="请输入手机号码"
                             autocomplete="off"
                             v-decorator="[
                                'userMobile',
                                { rules: [
                                    { required: true, message: '请输入手机号码' },
                                    { pattern: /^1([3456789])\d{9}$/,message: '请输入正确的手机号码' }
                                ] }
                             ]"
                    />
                </a-form-item>
                <!-- 所属部门 -->
                <a-form-item label="所属部门">
                    <a-select placeholder="请选择所属部门" v-decorator="[ 'deptId',{ rules : [{ required: true, message: '请选择所属部门' }] } ]">
                        <a-select-option v-for="item in deptList" :key="item['id']">
                            {{ item['deptName'] }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <!-- 用户角色 -->
                <a-form-item label="用户角色">
                    <a-select mode="multiple"
                              placeholder="请选择角色"
                              v-decorator="[
                                  'roleIdList',
                                  { rules: [{ required: true, message: '请选择角色' }] }
                              ]"
                    >
                        <a-select-option v-for="role in roleList" :key="role.id">{{ role['roleName'] }}</a-select-option>
                    </a-select>
                </a-form-item>
            </template>
        </c-form-modal>
    </div>
</template>

<script>
    import CTable from '@/components/table/CTable';
    import CFormModal from '@/components/form/CFormModal';
    import CDeptManage from './DepartmentManage';
    import { getEmployeePage,getDepartmentList,getRoleList,addEmployee,editEmployee,getEmployeeRoleIds,deleteEmployee } from '@/apis/upms';
    export default {
        components : {
            CTable,
            CDeptManage,
            CFormModal,
        },
        props : {
            username : { type : String, default : '' },
            userMobile : { type : String, default : '' },
        },
        data(){
            return {
                //  部门列表
                deptList : [],
                //  角色列表
                roleList : [],
            };
        },
        mounted(){
            let $this = this;
            //  获取角色列表
            getRoleList({}).then(res => $this.roleList = res.data);
        },
        methods : {
            //  分页查询员工信息API
            getEmployeePage,
            //  重新加载部门列表
            reloadDeptList : function(){
                let $this = this;
                getDepartmentList().then(res => {
                    $this.deptList.splice(0,$this.deptList.length);
                    $this.deptList = res.data;
                });
            },
            //  点击添加员工按钮
            clickAddEmployeeButton : function(e){
                e.preventDefault();
                let $this = this;
                $this.reloadDeptList();
                //  打开弹窗
                $this.$refs['employeeFormModal'].open({
                    title : '添加员工',
                    apiInterface : addEmployee,
                    callbackFn : () => {
                        $this.$refs['employeeTable'].getDataList();
                        $this.$message.success("添加成功");
                    },
                    data : {}
                });
            },
            //  点击修改员工按钮
            clickEditEmployeeButton : function (params) {
                let $this = this;
                $this.reloadDeptList();
                //  获取员工的角色Id列表
                getEmployeeRoleIds(params['id']).then(res => {
                    params['roleIdList'] = res.data;
                    //  打开弹窗
                    $this.$refs['employeeFormModal'].open({
                        title : '修改员工',
                        apiInterface : editEmployee,
                        callbackFn : () => {
                            $this.$refs['employeeTable'].getDataList();
                            $this.$message.success("保存成功");
                        },
                        data : { ...params }
                    });
                });
            },
            //  点击删除员工按钮
            clickDeleteEmployeeButton : function (params) {
                let $this = this;
                $this.$modal.confirm({
                    title : '删除员工',
                    content : '确认删除【' + params['username'] + '】',
                    onOk : () =>  deleteEmployee(params['id']).then(() => {
                        $this.$refs['employeeTable'].deleteDataItem(params);
                        $this.$message.success("删除成功");
                    })
                });
            },
        }
    }
</script>
<style scoped>
    .c-layout {
        overflow: hidden;
        display: flex;
    }
    .c-layout-sidebar {
        width: 300px;
    }
    .c-layout-content{
        width: 100%;
        padding-left: 10px;
    }
</style>
